<template>
  <!-- 消息气泡 -->
  <div
    class="item-class"
    :class="{
      'left-msg': left,
      'right-msg': right,
    }"
  >
    <!-- 时间线 -->
    <div class="time-line-class" v-if="msgInfo.showTime">
      <span style="margin: 10px 0; font-size: 15px; color: lightgray">{{
        msgInfo.showTime
      }}</span>
    </div>
    <!-- 撤回消息 -->
    <div v-if="msgInfo.type === $msgUtils.RECALL_MSG">
      <withdraw-msg :msgInfo="msgInfo"></withdraw-msg>
    </div>
    <!-- 气泡消息 -->
    <div v-else>
      <!-- 头像 -->
      <div
        :class="{
          'left-msg': left,
          'right-msg': right,
        }"
        class="avatar-container-class"
        @click="showUserInfo(msgInfo.uid)"
      >
        <el-tooltip effect="dark" placement="right-start" manual v-model="userInfoTooltipFlag">
          <div slot="content" style="width: 200px; height: 150px">
            <div class="tooltip-content-class">
              <div class="tooltip-image-class">
                <el-image :src="msgInfo.avatar">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
              <div>
                <div class="tooltip-info-class tooltip-info-name-class">
                  <span>昵称：{{ msgInfo.nickname }}</span>
                </div>
                <div class="tooltip-info-class">
                  <span>性别：
                    <i v-if="msgInfo.gender === this.$constant.gender_type.UNKNOWN" class="iconfont xingbie-weizhi"></i>
                    <i v-if="msgInfo.gender === this.$constant.gender_type.MAN" class="iconfont nan"></i>
                    <i v-if="msgInfo.gender === this.$constant.gender_type.WOMAN" class="iconfont nanxing"></i>
                  </span>
                </div>
                <div class="tooltip-info-class">
                  <span>地区：{{ msgInfo.locPlace }}</span>
                </div>
              </div>
            </div>
            <div class="tooltip-option-class">
              <!-- TA的主页 -->
              <div class="icon-class">
                <i class="iconfont zhuye"></i>
              </div>
              <!-- 发消息 -->
              <div v-if="isFriend" class="icon-class">
                <i class="iconfont faxiaoxi"></i>
              </div>
              <!-- 加好友 -->
              <div v-if="!isFriend" class="icon-class" @click="addFriend(msgInfo.uid)">
                <i class="iconfont jiahaoyou"></i>
              </div>
              <!-- 艾特 -->
              <div class="icon-class">
                <i class="iconfont aite"></i>
              </div>
            </div>
          </div>
          <el-avatar
              class="avatar-class"
              :size="35"
              :src="msgInfo.avatar"
          ></el-avatar>
        </el-tooltip>
      </div>
      <!-- 内容 -->
      <div
        :class="{
          'left-content': left,
          'right-content': right,
        }"
      >
        <!-- 发送者信息 -->
        <div
          :class="{
            'left-info-class': left,
            'right-info-class': right,
          }"
        >
          <span
            style="font-size: 15px; color: lightgray"
            :class="{ 'right-name-class': right }"
            >{{ msgInfo.nickname }}(<span>{{ msgInfo.locPlace }}</span
            >)
          </span>
        </div>
        <!-- 消息气泡 -->
        <div  @contextmenu.prevent="showMsgContentTooltip(msgInfo)" id="tooltipDiv">
          <el-tooltip ref="msgBubbleTooltip" manual placement="top" v-model="msgContentTooltipFlag">
            <div class="withdraw-class" slot="content">
              <div v-if="showRecall" @click="withdrawMsg(msgInfo.id)">撤回</div>
              <div @click="replyMsg(msgInfo)">回复</div>
            </div>
            <!--  消息内容(区分不同消息类型) -->
            <msg-content :self="right" :msgInfo="msgInfo" />
          </el-tooltip>
        </div>
      </div>
    </div>
    <add-friend-dialog :show-add-friend-frame="showAddFriendFrame" :target-uid="addFriendUid" @close="closeAddFriend"/>
  </div>
</template>

<script>
import MsgContent from "@/im/components/chat/chatBox/showContent/index.vue";
import withdrawMsg from "@/im/components/chat/chatBox/showContent/withdrawMsg";
import addFriendDialog from "@/im/components/common/addFriendDialog.vue";
import {isFriend} from "@/api/userFriend";

export default {
  components: { MsgContent,withdrawMsg, addFriendDialog },
  props: {
    msgInfo: {
      // 0:接受 1:发送
      type: Object,
    },
  },
  data() {
    return {
      isFriend: false,
      showRecall: false,
      currUid: this.$store.state.user.currentUser.uid,
      msgContentTooltipFlag: false,
      userInfoTooltipFlag: false,
      showAddFriendFrame: false,
      addFriendUid: 0,
    };
  },
  methods: {
    // 关闭添加好友弹窗
    closeAddFriend(){
      this.showAddFriendFrame = false;
    },
    // 打开添加好友弹窗
    addFriend(uid) {
      if (this.userInfoTooltipFlag) {
        this.addFriendUid = uid;
        this.showAddFriendFrame = true;
      }
    },
    // 展示用户信息
    showUserInfo(uid){
      if (uid === this.currUid) {
        // 本人不用打开
        return;
      }
      this.userInfoTooltipFlag = true;
      isFriend(uid).then(res => {
        this.isFriend = res.data;
        document.addEventListener('click', this.handleCancelUserInfoTooltip)
      })

      setTimeout(() => {

      }, 500)
    },
    // 回复消息
    replyMsg(msgInfo){
      this.$EventBus.$emit("replyMsg", msgInfo);
      this.msgContentTooltipFlag = false
    },
    // 撤回消息
    withdrawMsg(msgId) {
      this.$EventBus.$emit("withdrawMsg", msgId);
      this.msgContentTooltipFlag = false
    },
    // 展示消息内容的tooltip
    showMsgContentTooltip(msgInfo) {
      // 如果是本人才能显示撤回按钮
      this.msgContentTooltipFlag = true
      const timeout = new Date().getTime() - msgInfo.sendTime > 2 * 60 * 1000;
      if (!timeout && msgInfo.uid === this.currUid) {
        this.showRecall = true
      }
      document.addEventListener('click', this.handleCancelMsgContentTooltip)
    },
    handleCancelUserInfoTooltip() {
      this.userInfoTooltipFlag = false;
      this.isFriend = false;
      document.removeEventListener('click', this.handleCancelUserInfoTooltip);
    },
    handleCancelMsgContentTooltip(event) {
      const tooltipEl = this.$refs.msgBubbleTooltip?.$el;
      const isClickInsidePopover = tooltipEl?.contains(event.target);
      const isClickInsideTrigger = event.target.closest('#tooltipDiv');
      if (!isClickInsidePopover && !isClickInsideTrigger) {
        this.msgContentTooltipFlag = false
        this.showRecall = false;
        document.removeEventListener('click', this.handleCancelMsgContentTooltip);
      }
    }
  },
  computed: {
    left() {
      return this.msgInfo.uid !== this.currUid;
    },
    right() {
      return this.msgInfo.uid === this.currUid;
    },
  },
};
</script>

<style scoped>
.item-class {
  width: 100%;
  padding: 20px;
}

.left-info-class {
  margin-bottom: 5px;
}

.right-info-class {
  margin-bottom: 25px;
}

.right-name-class {
  float: right;
}

.left-msg {
  float: left;
}

.right-msg {
  float: right;
}

.left-content {
  float: left;
  margin-left: 5px;
}

.right-content {
  float: right;
  margin-right: 5px;
}

.time-line-class {
  clear: both;
  display: flex;
  justify-content: center; /* 水平居中 */
}

.tooltip-content-class {
  display: flex;
  height: 80px;
  border-bottom: 1px lightslategray solid;
}

.tooltip-image-class {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  height: 60px;
  width: 60px;
}

.tooltip-info-class {
  margin-left: 5px;
  margin-top: 5px;
  font-size: 12px;
}

.tooltip-info-name-class {
  width: 100px;
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 使用省略号代替溢出内容 */
}

.tooltip-option-class {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 10px;
}

.tooltip-option-class .iconfont {
  font-size: 30px;
  padding: 15px;
}

.icon-class :hover {
  cursor: pointer;
}

.avatar-container-class {
  width: 35px;
  height: 35px;
}
.avatar-container-class :hover {
  cursor: pointer;
}


.withdraw-class div {
   padding: 2px;
}

.withdraw-class :hover {
  cursor: pointer;
  color: #90caf6;
}
</style>
